<template>
  <div class="efficiency-container">
    <div class="top">
      <el-row>
        <el-col :span="12" class="left">
          <el-card>
            <div slot="header">运营人员（当天）</div>
            <div v-if="show" class="group">
              <div class="item">
                <div class="data">{{ workInfo[0].total }}</div>
                <div class="title">工单总数（个）</div>
              </div>
              <div class="item">
                <div class="data">{{ workInfo[0].completedTotal }}</div>
                <div class="title">完成工单（个）</div>
              </div>
              <div class="item">
                <div class="data">{{ workInfo[0].cancelTotal }}</div>
                <div class="title">拒绝工单（个）</div>
              </div>
              <div class="item">
                <div class="data">{{ workInfo[0].workerCount }}</div>
                <div class="title">运营人员数（个）</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12" class="right">
          <el-card>
            <div slot="header">运营人员（当天）</div>
            <div v-if="show" class="group">
              <div class="item">
                <div class="data">{{ workInfo[1].total }}</div>
                <div class="title">工单总数（个）</div>
              </div>
              <div class="item">
                <div class="data">{{ workInfo[1].completedTotal }}</div>
                <div class="title">完成工单（个）</div>
              </div>
              <div class="item">
                <div class="data">{{ workInfo[1].cancelTotal }}</div>
                <div class="title">拒绝工单（个）</div>
              </div>
              <div class="item">
                <div class="data">{{ workInfo[1].workerCount }}</div>
                <div class="title">运营人员数（个）</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="bottom">
      <el-row>
        <el-col :span="18">
          <div class="status">
            <el-card>
              <div slot="header">
                <div class="header">
                  <div class="left">用单状态</div>
                  <div class="right">
                    <el-date-picker
                      v-model="dataInfo"
                      type="daterange"
                      range-separator="-"
                      :start-placeholder="start"
                      :end-placeholder="end"
                      size="mini"
                      style="width:230px"
                      value-format="yyyy-MM-dd"
                    />
                    <div
                      class="
                      sale-time"
                    >
                      <span
                        :class="{ active: activeType === 'week' }"
                        @click="handleType('week')"
                      >周</span>
                      <span
                        :class="{ active: activeType === 'month' }"
                        @click="handleType('month')"
                      >月</span>
                      <span
                        :class="{ active: activeType === 'year' }"
                        @click="handleType('year')"
                      >年</span>
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="hasData" ref="chart" class="chart" style="height: 450px; width: 902px" />
              <el-card v-else title="暂无数据" image="https://likede2-admin.itheima.net/img/empty.87c4f71b.png" style="margin-top: 60px" />
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="rank">
            <el-card>
              <div slot="header" class="header">
                <div>人效排名(月度)</div>
                <div>
                  <el-dropdown :hide-on-click="true" trigger="click" style="positon:relative">
                    <span class="el-dropdown-link">
                      {{ selected }}<i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <el-dropdown-menu slot="dropdown" style="height: 270px; overflow: scroll">
                      <el-dropdown-item @click.native="handleDropDown({name: '全部',id: 0})">全部</el-dropdown-item>
                      <el-dropdown-item v-for="item in regionList" :key="item.id" @click.native="handleDropDown(item)">{{ item.name }}</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
              <div class="type">
                <div :class="{checked: personType===0}" @click="handlePersonType(0)">运营人员</div>
                <div :class="{checked: personType===1}" @click="handlePersonType(1)">运维人员</div>
              </div>
              <div v-if="topWorkers.length" class="hot-container">
                <ul>
                  <li v-for="(item,index) in topWorkers" :key="index">
                    <span class="iconfont" :class="`rank${index+1}`">{{ index+1 }}</span>
                    <span class="name">{{ item.userName }}</span>
                    <span class="count">{{ item.workCount }}单</span>
                  </li>
                </ul>
              </div>
              <el-card v-else title="暂无数据" image="https://likede2-admin.itheima.net/img/empty.87c4f71b.png" style="margin-top: 60px:height: 330px" />
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getWorkOrder, getWorkStatusCount,getRegionList1,getTop10Worker } from '@/api/user'
export default {
  data() {
    return {
      show: false,
      workInfo: [],
      activeType: 'week',
      start: '',
      end: '',
      hasData: false,
      statusList: [],
      personType: 0,
      regionList: [],
      selected: '全部',
      selectedId: 0,
      topWorkers: [],
      dataInfo: null,
      myChart: null,
      seriesDone: [],
      seriesCancel: [],
      xAxis: []
    }
  },
  watch: {
    dataInfo: {
      handler(newVal) {
        this.start = newVal[0]
        this.end = newVal[1]
        this.getStatusList()
      },
      deep: true
    }
  },
  async created() {
    const start = this.$moment().format('YYYY-MM-DD') + ' 00:00:00'
    const end = this.$moment().format('YYYY-MM-DD') + ' 23:59:59'

    const res = await getWorkOrder({ start, end })
    this.show = true
    this.workInfo = res
    this.start = this.$moment().startOf('week').format('YYYY-MM-DD')
    this.end = this.$moment().format('YYYY-MM-DD')
    this.getStatusList()
    const regions = await getRegionList1({ pageIndex: 1, pageSize: 1000 })
    this.regionList = regions.currentPageRecords
    this.getTop10Worker()
  },
  methods: {
    async  getStatusList() {
      console.log(111)
      const res = await getWorkStatusCount({
        start: this.start,
        end: this.end
      })
      if (res.length) {
        this.hasData = true
      } else {
        this.hasData = false
      }
      res.forEach((item, index) => {
        if (item.finishCount || item.cancelCount) {
          this.seriesDone.push(item.finishCount)
          this.seriesCancel.push(item.cancelCount)
          this.xAxis.push(this.$moment(item.collectDate).format('MM月DD日'))
        }
      })
      this.$nextTick(() => {
        this.renderChart()
      })
    },
    // 日期切换
    handleType(type) {
      this.activeType = type

      if (type === 'week') {
        this.start = this.$moment().startOf('week').format('YYYY-MM-DD')
      } else if (type === 'month') {
        this.start = this.$moment().startOf('month').format('YYYY-MM-DD')
      } else if (type === 'year') {
        this.start = this.$moment().startOf('year').format('YYYY-MM-DD')
      }
      this.getStatusList()
    },
    // 人员类型
    handlePersonType(type) {
      this.personType = type
      this.getTop10Worker()
    },
    // 下拉选中
    handleDropDown(value) {
      this.selected = value.name
      this.selectedId = value.id
      this.getTop10Worker()
    },
    // 销冠
    async getTop10Worker() {
      const start = this.$moment().startOf('month').format('YYYY-MM-DD')
      this.topWorkers = await getTop10Worker({
        start,
        end: this.end,
        regionId: this.selectedId,
        isRepair: !!this.personType
      })
    },
    // 渲染图表
    renderChart() {
      console.log(this.$refs.chart)
      if (this.$refs.chart) {
        console.log(222)
        this.myChart = this.$echarts.init(this.$refs.chart)
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              label: {
                show: true
              }
            }
          },
          calculable: true,
          legend: {
            data: ['完成工单', '取消工单'],
            itemGap: 5,
            bottom: '7%'
          },
          grid: {
            top: '12%',
            left: '2%',
            right: '10%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: this.xAxis
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '工单量（个）',
              axisLabel: {
                formatter: function(a) {
                  a = +a
                  return isFinite(a) ? this.$echarts.format.addCommas(+a / 1000) : ''
                }
              }
            }
          ],
          dataZoom: [
            {
              show: true,
              start: 0,
              end: 100,
              bottom: '7%'
            },
            {
              type: 'inside',
              start: 0,
              end: 100
            },
            {
              show: false,
              yAxisIndex: 0,
              filterMode: 'empty',
              width: 30,
              height: '80%',
              showDataShadow: false,
              left: '93%'
            }
          ],
          series: [
            {
              name: '完成工单',
              type: 'bar',
              data: this.seriesDone,
              barWidth: '10%',
              itemStyle: {
                barBorderRadius: [4, 4, 0, 0]
              }
            },
            {
              name: '取消工单',
              type: 'bar',
              data: this.seriesCancel,
              barWidth: '10%',
              itemStyle: {
                barBorderRadius: [4, 4, 0, 0],
                color: 'red'
              }
            }
          ]
        }
        this.myChart.setOption(option)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  border-radius: 20px;
}
::v-deep .el-card__header {
  border-bottom: 0;
  padding-bottom: 0;
  color: #333333;
  font-size: 16px;
  font-weight: 700 !important;
}
.efficiency-container {
  .top {
    margin-bottom: 20px;
    .left {
      padding-right: 10px;
      .el-card {
        background-color: #e9f3ff;
        background-image: url(""), url("");
        background-repeat: no-repeat, no-repeat;
        background-position: 0 0, calc(100% - 12px) 100%;
        .group {
          display: flex;
          .item {
            width: 25%;
            height: 90px;
            text-align: center;
            .data {
              text-shadow: 2px 4px 7px rgba(85, 132, 255, 0.5);
              color: #072074;
              height: 50px;
              font-size: 36px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              line-height: 50px;
              text-shadow: 2px 4px 7px rgba(85, 132, 255, 0.5);
            }
            .title {
              color: #91a7dc;
              height: 17px;
              margin-top: 3px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #91a7dc;
              line-height: 17px;
            }
          }
        }
      }
    }
    .right {
      padding-left: 10px;
      .el-card {
        background: #fbefe8 url("") no-repeat
          calc(100% - 12px) 100%;
        .group {
          display: flex;
          .item {
            width: 25%;
            text-align: center;
            height: 90px;
            .data {
              text-shadow: 2px 4px 7px rgba(255, 99, 85, 0.5);
              color: #ff5757;
              height: 50px;
              font-size: 36px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              line-height: 50px;
              text-shadow: 2px 4px 7px rgba(85, 132, 255, 0.5);
            }
            .title {
              color: #de9690;
              height: 17px;
              margin-top: 3px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #91a7dc;
              line-height: 17px;
            }
          }
        }
      }
    }
  }
  .bottom {
    .status {
      padding-right: 20px;
      height: 562px !important;
      .el-card {
        height: 100%;
      }
      ::v-deep .el-card__body{
        height: 468px;
      }
      .el-card__header {
        .header {
          display: flex !important;
          justify-content: space-between;
          .right {
            display: flex;
          }
          ::v-deep .el-range-editor--mini .el-input__inner {
            width: 230px;
          }
          .sale-time {
            margin-left: 20px;
            width: 108px;
            background: rgba(233, 243, 255, 0.37);
            -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.11);
            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.11);
            border-radius: 7px;
            font-weight: 600;
            color: #333;
            padding: 3px;
            span {
              display: inline-block;
              width: 32px;
              height: 25px;
              text-align: center;
              line-height: 25px;
              font-size: 14px;
              color: #9ca3b4;
              cursor: pointer;
            }
          }
          .active {
            background: #fff;
            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.11);
            border-radius: 5px;
          }
        }
      }
    }
    .rank {
      .el-card {
        height: 562px;
      }
      ::v-deep .el-card__header {
        padding-top: 5px;
      }
      .header {
        display: flex;
        height: 40px;
        line-height: 40px;
        justify-content: space-between;
        .el-dropdown-link {
          width: 88px;
          height: 25px;
          text-align: center;
          line-height: 25px;
          display: block;
          border: 1px solid skyblue;
          border-radius: 5px;
          cursor: pointer;
          font-size: 13px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .el-dropdown-menu {
          height: 274px !important;
          overflow: scroll;
        }
      }
      .type {
        display: flex;
        justify-content: center;
        height: 34px;
        padding-top: 5px;
        width: 160px;
        margin-left: 50px;
        justify-items: center;
        background: rgba(233, 243, 255, 0.37);
        border-radius: 10px;
        div {
          width: 78px;
          text-align: center;
          height: 25px;
          line-height: 25px;
          font-size: 14px;
          color: #9ca3b4;
          cursor: pointer;
        }
        .checked {
          background: #fff;
          -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.11);
          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.11);
          border-radius: 7px;
          font-weight: 600;
          color: #333;
        }
      }
      ul {
        padding: 0;
        margin-top: 0;
      }
      li {
        list-style: none;
      }
      .hot-container {
        margin-top: 20px;
        li {
          display: flex;
          margin-bottom: 10px;
          .iconfont {
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 14px;
            margin-right: 15px;
            font-size: 12px;
            background: url('');
            color: #e9b499;
          }
          .rank1,
          .rank2,
          .rank3 {
            width: 22px;
          }
          .rank2 {
            background: url('');
            color: #8e5900;
          }
          .rank3 {
            background: url('');
            color: #494949;
          }
          .rank1 {
            background: url('');
            color: #cf6d3d;
          }
          .name {
            width: 60%;
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333;
            line-height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .count {
            width: 25%;
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #737589;
            line-height: 20px;
            text-align: right;
          }
        }
      }
    }
  }
}
</style>
